import React, { Component } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, message, Form, Input, Space } from 'antd';
import Captcha from '../../components/Captcha'
import axios from '../../http/http';
import url from '../../config/url';
import { withRouter } from 'react-router-dom';
import Cookies from 'js-cookie';
class Normal extends Component {
    render() {
        return (
            <div>
                <div>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.onFinish}
                    >
                        {/* 用户名 */}
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: "请输入用户名!",
                                },
                            ]}
                        >
                            <Input
                                prefix={<UserOutlined className="site-form-item-icon" />}
                                placeholder="请输入用户名"
                            />
                        </Form.Item>
                        {/* 密码 */}
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: "请输入密码!",
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="请输入密码"
                            />

                        </Form.Item>
                        <Space>
                            <Form.Item
                                name="captcha"
                                rules={[
                                    {
                                        required: true,
                                        message: "请输入验证码!",
                                    },
                                ]}
                            >
                                <Input
                                    prefix={<UserOutlined className="site-form-item-icon" />}
                                    placeholder="验证码" size='large'
                                />
                            </Form.Item>
                            <Form.Item>
                                <Captcha getKey={this.getKey} w={120}></Captcha>
                            </Form.Item>
                        </Space>
                        <Form.Item >
                            <Button
                                type="primary"
                                htmlType="submit"
                                className="login-form-button"
                                size="large"
                            >
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
    // 提交事件
    onFinish = (values) => {
        // console.log('Received values of form: ', values);
        values.key = this.state.key;
        axios.post(url.pwdLogin, values).then(res => {
            if (res.data.errNo === 0) {
                // 登录成功
                // 01 做一次提示 adnt
                // 02 将jwt(jsonwebtoken===token)
                // 03 将用户的权限菜单 数组也存在localstorage
                // 04 跳转到首页
                message.success('登录成功', 1)
                Cookies.set('jwt', res.data.context.jwt)
                localStorage.setItem('acl', JSON.stringify(res.data.context.acl))
                this.props.history.push('/dashboard')
            } else {
                // 登陆失败
                message.error(res.data.errText, 2)
            }
        }).catch(res => {

        })
    };
    getKey = (key) => {
        // console.log(key);
        this.setState({
            key: key
        })
    }


}

export default withRouter(Normal);
